<template>
  <div class="album-warp">
    <div class="album-left">
      <div class="album-left-hader">
        <img :src="albumDetailes.blurPicUrl" alt="" />
        <div class="album-left-hader-right">
          <span>
            <i class="iconfont">&#xe64b;</i>
            {{ albumDetailes.name }}
          </span>
          <div>歌手{{ albumDetailes.name }}</div>
          <span>专辑简介{{ albumDetailes.name }}</span>
          <span>专辑简介{{ albumDetailes.description }}</span>
          <span>专辑简介{{}}</span>
        </div>
      </div>
      <div class="album-left-body"></div>
    </div>
    <div class="album-right"></div>
  </div>
</template>

<script>
import { getAlbum } from "@/api/api";
export default {
  name: "album",
  data() {
    return {
      albumDetailes: {},
      id: null,
      musicList: [],
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.getAlbumDetailes();
  },
  methods: {
    getAlbumDetailes() {
      getAlbum({ id: this.id }).then((res) => {
        this.albumDetailes = res.data.album;
        this.musicList = res.data.songs;
        console.log(this.albumDetailes);
        console.log(this.musicList);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.album-warp {
  margin: 120px auto 0 auto;
  width: 1200px;
  display: flex;
  justify-content: space-between;
  .album-left {
    width: 880px;
    margin-right: 20px;
    .album-left-hader {
      display: flex;
      justify-content: space-between;
      img {
        width: 280px;
        height: 280px;
        padding: 5px;
        border-radius: 10px;
        box-sizing: border-box;
        border: 1px solid #6b6b6b36;
        margin-right: 20px;
      }
      .album-left-hader-right {
        width: 580px;
        span {
          font-family: "hmR";
          font-size: 24px;
          .i {
            font-size: 24px !important;
            margin-right: 10px;
          }
        }
      }
    }
  }
  .album-right {
    width: 300px;
    height: 500px;
    background-color: red;
  }
}
</style>